// 配置自定义主题样式数据
const autoThemes = {
    // 黄色主题
    orange: {
        "--title-color": "#FF6040",
        "--full-screen-color": "#FF6040",
        "--aside-bg-color": "linear-gradient(to bottom, #FF6040, #FF8A80)",
        "--menu-bg-color": "#FF6040"
    },
    // 蓝色主题
    blue: {
        "--title-color": "#409EFF",
        "--full-screen-color": "#409EFF",
        "--aside-bg-color": "linear-gradient(to bottom, #409EFF, #A1C9F2)",
        "--menu-bg-color": "#409EFF"
    },
    // 粉色主题
    pink: {
        "--title-color": "#F26AB5",
        "--full-screen-color": "#F26AB5",
        "--aside-bg-color": "linear-gradient(to bottom, #F26AB5, #FCC3E2)",
        "--menu-bg-color": "#F26AB5"
    }
}

/**
 * 定义并导出切换主题方法
 * params:{
 *  themeName:主题名称
 * }
 * 功能：
 *  实现element-ui内置主题切换
 *  实现自定义主题切换
 * */
export default (themeName) => {

    // 1.获取引入主题样式的link元素对象
    let link = document.getElementsByTagName('link')[1]
    // 2.修改link href值
    link.href = `./themes/${themeName}/theme/index.css`

    // 3.获取body对象元素
    let body = document.getElementsByTagName('body')[0]
    // 4.获取当前主题对应的自定义样式数据
    let autoData = autoThemes[themeName]
    console.log(autoData)
    // 5.遍历自定义主题对象数据 修改每一个css变量值
    for (let key in autoData) {
        body.style.setProperty(key, autoData[key])
    }
}